<template>
  <el-scrollbar height="98vh" wrap-class="scrollWrap" @scroll="handleShowBackBottom">
  <el-row  ref="box"  >
    <!--    查询条件-->
    <el-col :span="24" v-if="jzTableData.jzTable.queryCriteriaBotton&&jzTableConfig.queryCriteria">
      <slot name="showQuery"></slot>
    </el-col>
    <!--    按钮组-->
    <el-col :span="24">

      <el-row :gutter="24">

        <el-col :span="15">
          <slot name="buttonGroup"></slot>
        </el-col>
        <el-col :span="9">

          <div class="ml-4" style="position: relative;float: right;">
            <el-tooltip
                effect="dark"
                content="显隐列"
                placement="top-end" v-if="jzTableData.jzTable.columnsBotton"
            >
                <el-popover placement="bottom-start"  trigger="click" >
                  <template #reference>
                    <el-button circle>
                      <el-icon>
                        <Grid/>
                      </el-icon>
                    </el-button>
                  </template>
                  <ul>
                    <li v-for="item in jzTableData.jzTable.zjColumnList">
                      <el-checkbox v-model="item.show"   style="height: 10px" :label="item.label" size="large"/>
                    </li>
                  </ul>

                </el-popover>
            </el-tooltip>

            <el-tooltip
                effect="dark"
                content="刷新"
                placement="top-end" v-if="jzTableData.jzTable.refreshBotton"
            >
              <el-button circle @click="refreshClick">
                <el-icon >
                  <Refresh/>
                </el-icon>
              </el-button>
            </el-tooltip>

            <el-tooltip
                effect="dark"
                :content="jzTableConfig.queryCriteria?'隐藏搜索':'显示搜索'"
                placement="top-end"
                v-if="jzTableData.jzTable.queryCriteriaBotton"
            >
              <el-button circle @click="jzTableConfig.queryCriteria=!jzTableConfig.queryCriteria">
                <el-icon>
                  <ZoomOut v-if="jzTableConfig.queryCriteria"/>
                  <ZoomIn v-if="!jzTableConfig.queryCriteria"/>
                </el-icon>
              </el-button>

            </el-tooltip>
          </div>

        </el-col>
      </el-row>
    </el-col>
    <!--    数据展示-->
    <el-col :span="24">
      <el-container style="">
        <!--        数据-->
        <el-main style="overflow-y: hidden">
          <el-table table-layout="fixed" :data="jzTableData.jzPageData.records" :stripe="true" :border="true" :highlight-current-row="true" style="width: auto;" header-row-class-name="etable" :fit="true"
                    @sort-change="sortChange"
                    @selection-change="handleSelectionChange"
          >

            <slot name="tableColumn"></slot>
          </el-table>
          <el-pagination
              style="margin-top: 5px"
              :total="jzTableData.jzPageData.total"
              layout="->,sizes,total, prev, pager, next, jumper"
              v-model:current-page="jzTableData.jzPageData.current"
              v-model:page-size="jzTableData.jzPageData.size"
              :page-sizes="[10, 20,50, 100]"
              :size="size"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </el-main>

      </el-container>
    </el-col>

  </el-row>

  </el-scrollbar>
  <el-backtop target=".scrollWrap" :right="0" :bottom="0"></el-backtop>
  <el-backtop
      v-if="showBackBottom"
      class="el-backtop-bottom"
      target=".scrollWrap"
      :visibility-height="0"
      :right="0"
      :bottom="0"
      @click="scrollBottom"
  >
    <el-icon><CaretBottom /></el-icon>
  </el-backtop>

</template>

<script setup lang="ts">
import {reactive, ref,onMounted,nextTick} from 'vue';
import type {TableInstance, ComponentSize} from "element-plus";

import {type JzTableBean, jzTableConfig, jzTableData, type ZjColumn} from "./JzTable";



import { CaretBottom } from '@element-plus/icons-vue'

let showBackBottom = ref<Boolean>(false)

/**
 * 判断是否显示回到底部按钮
 */
const handleShowBackBottom = () => {
  const container = document.querySelector('.scrollWrap') as HTMLElement
  const maxScrollTop = container.scrollHeight - container.offsetHeight
  const isBottom = container.scrollTop >= maxScrollTop
  showBackBottom.value = container ? !isBottom : false
}

let list = ref<number[]>([])

/**
 * 异步获取列表数据
 */
const getList = () =>
    new Promise<number[]>((resolve) => {
      setTimeout(() => {
        resolve(Array.from({ length: 300 }, (_, index) => index + 1))
      }, 2000)
    })

onMounted(async () => {
  list.value = await getList()
  // 视图更新后, 判断滚动条位置是否达到底部
  nextTick(() => {
    handleShowBackBottom()
  })
})

/**
 * 回到底部
 */
const scrollBottom = () => {
  const container = document.querySelector('.scrollWrap')
  container && container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' })
}


/** 分页设置开始 */


const size = ref<ComponentSize>('default')
/** 分页设置结束 */

const emit = defineEmits(["refreshClick", "sortChange"]);


//查询列表提交对象
let queryFormInlineSubmit = defineModel('queryFormInlineSubmit')
let handleSelectionChangeData = defineModel('handleSelectionChangeData')
//
// const box = ref(null);


/**
 * 刷新
 */
function refreshClick() {
  emit("refreshClick")
}

/**
 * page-size 改变时触发
 */
const handleSizeChange = (val: number) => {
  jzTableData.value.jzPageData.size = val;
  jzTableData.value.jzPageData.current = 1;
  emit("refreshClick")

}
const handleSelectionChange = (val: number) => {
  handleSelectionChangeData.value=val;
}



/**
 * current-page 改变时触发
 */
const handleCurrentChange = (val: number) => {
  jzTableData.value.jzPageData.current = val;
  emit("refreshClick")
}
const sortChange = (v) => {
  jzTableData.value.jzPageData.current = 1;
  refreshClick();
}


</script>


<style scoped>

</style>